<template>
  <g class="node"
		:class="node.cls"
		:transform="`translate(${node.translate})`"
		@mouseover="nodeMouseover"
		@mouseout="nodeMouseout"
		@mouseup="nodeMouseup"
		@dblclick="nodeDblclick"
	>
  	<rect fill="transparent" width="58" height="58" x="-6" y="-6"></rect>
  	<rect rx="12" width="46px" height="46px" fill="#999"
	  stroke="#397a9c" stroke-width="1.2"
	  shape-rendering="geometricPrecision" filter="url(#shadow)"
	  class="shadow"></rect>
  	<rect rx="12" width="46px" height="46px" fill="#d9e8fb"
  	  stroke="#397a9c" stroke-width="1.2"
  	  shape-rendering="geometricPrecision" class="rect"></rect>
  	<image
	  class="icon" x="4.5" y="4.5" width="36px" height="36px"
  	  :xlink:href="node.image"
	  @mousedown.stop="clickNode"
	  @mouseup="showNodeRemove(idx, true)"
	  ></image>
  	<text x="23" y="65" font-size="12px" font-weight="bold"
			@dblclick="editTitle"
  	  fill="#0974ac" text-anchor="middle" v-text="node.title"></text>
  	<image v-show="showRemoveImg"
	  @mousedown.stop="delNode(node.id, idx)"
	  class="remove" x="40" y="-4" width="10px" height="10px"
  	  xlink:href="./css/icons/node-remove.svg"></image>
  </g>
</template>

<script>
  import flow from './js/flow'
  export default {
		name: 'FlowNode',
		props: [
			'node',
			'idx',
			'setNodeDotCls',
			'moveNode',
			'resetNode',
			'delNode',
			'showNodeRemove',
			'setNodeTitle',
			'setMenu'
		],
		computed: {
			showRemoveImg() {
				return this.node.showRemove && this.node.cls.indexOf('move') == -1
			}
		},
		methods: {
			nodeMouseover() {
				this.showNodeRemove(this.idx, true);
				this.setNodeDotCls(true, this.idx, this.node.id);
			},
			nodeMouseout() {
				this.showNodeRemove(this.idx, false);
				this.setNodeDotCls(false);
			},
			nodeMouseup(e){
				if(e.button == 2) {
					this.setMenu({idx: this.idx, nodeId: this.node.id, type: this.node.type}, {left: `${e.pageX}px`, top: `${e.pageY}px`});
				}
				this.resetNode(this.idx);
			},
			nodeDblclick(){
				window.setTimeout(()=>{
					this.$emit('onDblclick', this.node.id, this.node.type)
				},0)
			},
			clickNode(e) {
				if(e.button != 2) {
						this.moveNode(this.idx, this.node.id);
					this.resetNode(this.idx);
				}
			},
			editTitle() {
				let nodeX = this.node.translate[0];
				let nodeY = this.node.translate[1];
				let top = nodeY + flow.$nodeHeight + 2;
				let left = nodeX - 25;
				this.setNodeTitle({idx: this.idx}, {top: `${top}px`, left:`${left}px`});
			}
		}
  }
</script>

<style scoped>
	image.icon:hover {	
		cursor: move;
	}
	g.move rect.shadow,
	g.focus rect.rect {
		fill: #ede6b7;
	}
	g.move rect {
		stroke-dasharray: 3,2
	}
	image.remove, 
	text:hover{
		cursor: pointer;
	}
</style>
